<template>
  <div>
    <!-- 货物需求编辑 2018/3/6 15:03 zhangQ -->
    <Row>
      <Col span="24">
        <div style="" class="doc-header">
          <Form :model="addProductForm" :label-width="120" ref="addProductForm" :rules="addProductRule">
            <Form-item label="信息类型">
              {{ msgTypeList[addProductForm.msgType-1].label }}
            </Form-item>
            <Form-item label="产品类型">
              {{ productTypeList[addProductForm.productType-1].label }}
            </Form-item>

            <Form-item label="产品属性">
              <Input v-model="addProductForm.productName" placeholder="货物需求请填写货物名称，车辆需求请填写车号"></Input>
            </Form-item>

            <Form-item label="数量">
              <Input v-model="addProductForm.number" placeholder="需求数量">
              <Select v-model="addProductForm.unit" slot="append" placeholder="单位" style="width: 100px">
                <Option :value="item.cName" :key="item.cName" v-for="item in unitList">{{item.cName}}</Option>
              </Select>
              </Input>
            </Form-item>

            <Form-item label="所在城市">
              <Cascader :data="cityList" v-model="addProductForm.localCityId"></Cascader>
            </Form-item>

            <Form-item label="所在城市详细地址" prop="localCityDetail">
              <Input v-model="addProductForm.localCityDetail" placeholder="请填写详细地址"></Input>
            </Form-item>

            <Form-item label="目的地城市">
              <Cascader :data="cityList" v-model="addProductForm.needCityId"></Cascader>
            </Form-item>

            <Form-item label="目的地详细地址" prop="needCityDetail">
              <Input v-model="addProductForm.needCityDetail" placeholder="请填写详细地址"></Input>
            </Form-item>

            <Form-item label="联系人">
              <Input v-model="addProductForm.userName" placeholder="联系人"></Input>
            </Form-item>

            <Form-item label="手机号">
              <Input v-model="addProductForm.mobile" placeholder="手机号"></Input>
            </Form-item>

            <Form-item>
              <Button type="primary" @click="submitEdit('addProductForm')">保存</Button>
              <Button type="ghost" style="margin-left: 8px" @click="goBack">取消</Button>
            </Form-item>
          </Form>

        </div>
      </Col>
    </Row>
  </div>
</template>
<script>
  import {getProductDemandInfo, getCityList, editProductDemand} from '@api/backEnd/productDemand'

  export default {
    name: 'productRequirementEdit',
    data () {
      return {
        unitList: [
          {cName: '个', code: ''},
          {cName: '辆', code: ''},
          {cName: '米', code: ''},
          {cName: '平方米', code: '㎡'},
          {cName: '立方米', code: 'm³'},
          {cName: '升', code: 'L'},
          {cName: '千克', code: 'kg'},
          {cName: '吨', code: ''},
          {cName: '千米', code: ''},
          {cName: '平方千米', code: ''},
          {cName: '千升', code: ''}
        ],
        addProductForm: {
          msgType: null,
          productType: null,
          productName: null,
          number: null,
          localCityId: [],
          needCityId: [],
          localCityDetail: '',
          needCityDetail: '',
          userName: null,
          mobile: null,
          unit: ''
        },
        cityList: [],
        msgTypeList: [
          {
            value: 1,
            label: '需求'
          },
          {
            value: 2,
            label: '供给'
          }
        ],
        productTypeList: [
          {
            value: 1,
            label: '车辆'
          },
          {
            value: 2,
            label: '货物'
          },
          {
            value: 3,
            label: '集装箱'
          }
        ],
        addProductRule: {
          msgType: [
            {required: true, message: '信息类型必选', trigger: 'blur'}
          ],
          productType: [
            {required: true, message: '产品类型必选', trigger: 'blur'}
          ],
          productName: [
            {required: true, message: '产品名称必填', trigger: 'blur'}
          ],
          number: [
            {required: true, message: '数量必填', trigger: 'blur'}
          ],
          localCityId: [
            {required: true, message: '所在城市必选', trigger: 'blur'}
          ],
          needCityId: [
            {required: true, message: '目标城市必选', trigger: 'blur'}
          ],
          userName: [
            {required: true, message: '用户名必填', trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '手机号码必填', trigger: 'blur'},
            {pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '号码格式不正确！', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {},
    methods: {
      submitEdit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            const id = this.$route.params.id
            const msgType = this.addProductForm.msgType
            const productType = this.addProductForm.productType
            const productName = this.addProductForm.productName
            const number = this.addProductForm.number
            const localCityId = this.addProductForm.localCityId[this.addProductForm.localCityId.length - 1]
            const needCityId = this.addProductForm.needCityId[this.addProductForm.needCityId.length - 1]
            const userName = this.addProductForm.userName
            let localCityDetail = this.addProductForm.localCityDetail
            let needCityDetail = this.addProductForm.needCityDetail
            let mobile = this.addProductForm.mobile
            let unit = this.addProductForm.unit
            const param = {id, msgType, productType, productName, number, localCityId, needCityId, userName, mobile, localCityDetail, needCityDetail, unit}
            editProductDemand(param).then(res => {
              this.$Message.info('修改成功')
              this.$router.push({path: '/back_end/product_requirement/product_requirement_list'})
            })
          }
        })
      },
      goBack () {
        this.$router.go(-1)
      },
      setInitData () {
        const id = this.$route.params.id
        getProductDemandInfo(id).then(res => {
          if (res.data.isSuccess === 1) {
            for (let i in res.data.data) {
              const localCityParentId = parseInt(res.data.data[i].localCityId / 100) * 100
              const needCityParentId = parseInt(res.data.data[i].needCityId / 100) * 100
              const localCityArr = []
              const needCityArr = []
              this.addProductForm.productName = res.data.data[i].productName
              this.addProductForm.number = res.data.data[i].number
              this.addProductForm.msgType = res.data.data[i].msgType
              this.addProductForm.productType = res.data.data[i].productType
              this.addProductForm.userName = res.data.data[i].userName
              this.addProductForm.mobile = res.data.data[i].mobile
              localCityArr.push(localCityParentId)
              localCityArr.push(res.data.data[i].localCityId)
              needCityArr.push(needCityParentId)
              needCityArr.push(res.data.data[i].needCityId)
              this.addProductForm.localCityId = localCityArr
              this.addProductForm.needCityId = needCityArr
              this.addProductForm.localCityDetail = res.data.data[i].localCityDetail
              this.addProductForm.needCityDetail = res.data.data[i].needCityDetail
              this.addProductForm.unit = res.data.data[i].unit
            }
          }
        })
      },
      getCity () {
        getCityList().then(res => {
          if (res.data.isSuccess === 1) {
            this.cityList = res.data.data
          }
        })
      }
    },
    mounted () {
      this.setInitData()
      this.getCity()
    },
    components: {}
  }
</script>
<style scoped>

</style>
